<template>
	<div class="shop-item">
		<div class="shop-item-hd flex align-center" v-if="false">
			<image class="shopicon" src="/static/shopicon.png" mode="widthFix"></image>
			<text>花小二</text>
			<image class="right" src="/static/right.png" mode="widthFix"></image>
		</div>
		<div class="goodsinfo u-flex  align-center" v-for="(item, index) in list" :key="index">
			<div class="imgbox"><image :src="item.img_url[0] + '?imageView2/0/w/180'" mode="widthFix"></image></div>
			<div class="flex-sub u-flex u-flex-column ">
				<div class="u-flex u-row-between">
					<div class="name">{{ item.name }}</div>
					<div class="price">
						<text class="unit">￥</text>
						{{ item.price }}
					</div>
				</div>
				<div class="tag flex justify-between">
					<text>{{ item.title }}</text>
					<text class="num">×{{ item.qty }}扎</text>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'shopItem',
	data() {
		return {};
	},
	props: {
		list: {
			type: [Array],
			default: () => []
		}
	}
};
</script>

<style scoped lang="scss">
.shop-item {
	background: #f8f8f8;
	padding: 20upx;
	& + .shop-item {
		margin-top: 16upx;
	}
}
.shop-item-hd {
	font-size: 28upx;
	line-height: 40upx;
	color: $u-main-color;
	.shopicon {
		width: 31upx;
		height: 28upx;
		margin-right: 16upx;
	}
	.right {
		width: 28upx;
		height: 28upx;
		margin-left: 8upx;
	}
}
.goodsinfo {
	padding: 10upx 0;
	.imgbox {
		width: 130upx;
		height: 130upx;
		margin-right: 16upx;
		border-radius: 8upx;
		overflow: hidden;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.name {
		color: $u-main-color;
		font-size: 32upx;
		font-weight: 500;
		line-height: 45upx;
	}

	.tag {
		color: $u-content-color;
		font-size: 24upx;
		margin-top: 8upx;
	}
}
.price {
	.unit {
		font-size: 24upx;
	}
	color: $u-main-color;
	font-size: 36upx;
}
</style>
